import React, { useEffect, } from "react"
import './Article.less';
import { Carousel, BackTop } from "antd"
import { IRouteComponentProps, useSelector, useDispatch, useHistory } from 'umi'
import { labelItem, listItem, tagslistItem } from "@/utils/Article"
import ArticleItem from "@/components/ArticleItem"
import RightTop from "@/components/rightTop"
import RightBottom from "@/components/ArticleBottom"
import "@/utils/font_1hsfvuvglv9/iconfont.css"
import Thetime from "@/store/modules/index"

const style = {
  height: 40,
  width: 40,
  lineHeight: '40px',
  borderRadius: '50%',
  backgroundColor: '#000000',
  color: '#fff',
  textAlign: 'center',
  fontSize: 16,
};



const IndexPage: React.FC<IRouteComponentProps> = (props) => {
  const dev = useSelector((state: { Article: any; }) => state.Article)
  const dispatch = useDispatch()
  const history = useHistory()
  useEffect(() => {
    dispatch({
      type: "Article/gettags"
    }),
      dispatch({
        type: "Article/getswiper"
      }),
      dispatch({
        type: "Article/getArticlelist"
      }),
      dispatch({
        type: 'Article/readinglist'
      });
    dispatch({
      type: 'Article/getlabel'
    });
  }, [])

  function goDetail(id: string) {
    history.push("/page/readDetail", id)
  }
  return (
    <div className="index">

      <div className="content">
        <div className="left">
          {/* 头部轮播图 */}
          <header>
            <Carousel autoplay>
              {
                dev.swiperlist.map((item: listItem, index: number) => {
                  return <div key={index} className="swiperitem" onClick={() => { goDetail(item.id) }} >

                    <h2>{item.title}</h2>
                    <p>大约{Thetime(item.createAt)}<span>{item.views}次阅读</span></p>

                    <img src={item.cover} alt="" className="img" />
                  </div>
                })
              }
            </Carousel>
          </header>
          <main>
            <div className="tags">
              <span>所有</span>
                {
                    dev.tagslist.map((item:tagslistItem,index:number)=>{
                        return <span key={index} 
                        onClick={()=>{
                          history.push("/page/Atag",item.value)
                        }}
                        >{item.label}</span>
                    })
                }
            </div>
            <div className="article">
              {
                dev.articlelist.map((item: listItem, index: number) => {
                  if (item.cover == null) {
                    return
                  } else {
                    return <ArticleItem item={item} key={index} />
                  }
                })
              }
            </div>
          </main>
        </div>
        <div className="right">
          <div className="right_top">
            <h3>推荐阅读</h3>
            {
              dev.readList && dev.readList.map((item: listItem, index: number) => {
                return <RightTop key={index} item={item} />
              })
            }
          </div>
          <div className="right_bottom">
            <h3>文章标签</h3>
            <div className="bottomitem">
              {
                dev.labellist.map((item: labelItem, index: number) => {
                  return <RightBottom item={item} key={index} />
                })
              }
            </div>
          </div>
        </div>
      </div>
      <BackTop className="gotop">
        <div >
          <i className="iconfont icon-huidaodingbu" style={{fontSize: 
          "40px"}}></i>
        </div>
      </BackTop>
    </div>
  );
}
export default IndexPage